<template>
  <div class="charts" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'
export default {
  name: 'PieChart',
  mixins: [resize],
  mounted() {
    const myEcharts = echarts.init(this.$refs.chart)
    myEcharts.setOption({
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      },
      title: {
        // 一级表土
        text: '家用电器',
        textStyle: {
          fontSize: 14
        },
        // 二级标题
        subtext: 312,
        subtextStyle: {
          fontSize: 20
        },
        top: '44%',
        left: 'center'
      },
      series: {
        type: 'pie',

        data: [
          {
            name: '家用电器',
            value: 312
          },
          {
            name: '食用酒水',
            value: 336
          },
          {
            name: '个护健康',
            value: 342
          },
          {
            name: '服饰箱包',
            value: 41
          },
          {
            name: '母婴产品',
            value: 188
          },
          {
            name: '其他',
            value: 94
          }
        ],
        // 半径(内/外)
        radius: ['40%', '80%'],
        // 样式
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        },
        // 要显示的数据
        label: {
          formatter: '{b}: {c}'
        }
      }
    })
    this.myEcharts = myEcharts

    myEcharts.on('mouseover', function(params) {
      const { name, value } = params.data

      myEcharts.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
